<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>监听属性</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>你好{{info}}</h2>
        <button @click="change">切换</button>
        <br />
        <br />
        <h2>a = {{numbers.a}}</h2>
        <button @click="numbers.a++">点我a++</button>
    </div>

    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    isHot: true,
                    numbers: {
                        a: 1,
                        b: 2
                    }
                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '寒冷';
                }
            },
            watch: {
                // 常规写法
                // isHot: {
                //     immediate: true, // 初始化时是否调用handler
                //     // handler什么适合调用？当isHot属性发生改变时调用
                //     handler(newVal, oldVal) {
                //         console.log("isHot被修改了", newVal, oldVal);
                //     }
                // },

                // 简写形式，当配置项中只有handler时才可以使用简写形式
                isHot(newVal, oldVal) {
                    console.log("isHot被修改了", newVal, oldVal);
                },

                // 不仅可以监听data中的属性，也可以监听计算属性
                info: {
                    immediate: true,
                    handler(newVal, oldVal) {
                        console.log("info被修改了", newVal, oldVal);
                    }
                },
                // 监听多级结构中某个属性的变化，添加''
                'numbers.a': {
                    immediate: true,
                    handler(newVal, oldVal) {
                        console.log("numbers.a被修改了", newVal, oldVal);
                    }
                },
                // 监听多级结构中所有属性的变化
                // vue中的watch默认不监测对象内部发生的改变（一层），配置deep:true可以监测对象内部值的改变（多层）
                numbers: { // 注意，这样是不行的，因为修改属性不会修改bumbers的地址值，除非将deep属性置为true
                    deep: true,
                    immediate: true,
                    handler(newVal, oldVal) {
                        console.log("numbers中的某个属性被修改了", newVal, oldVal);
                    }
                }

            }
        });

        // 第二种方式进行监听
        // vm.$watch('isHot', {
        //     immediate: true, // 初始化时是否调用handler
        //     // handler什么适合调用？当isHot属性发生改变时调用
        //     handler(newVal, oldVal) {
        //         console.log("isHot被修改了", newVal, oldVal);
        //     }
        // })

        // 第二种方式同样也有简写形式，配置项同样只能有handler
        // vm.$watch('isHot',function(newVal,oldVal){
        //     console.log("isHot被修改了", newVal, oldVal);
        // })
    </script>

</body>

</html>